<template>
  <div>
    <cusDialog title="重置密码" ref="dialog" width="350px" headCss="float:left;" @hideHandler="hideHandler"
      @confrim="confrimHandler">
      <el-form :model="psdForm" ref="psdFormRef" :rules="rules" label-width="100">
        <el-form-item label="新密码：" prop="password">
          <el-input v-model="psdForm.password" show-password placeholder="请输入新密码"></el-input>
        </el-form-item>

      </el-form>
    </cusDialog>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import type { FormInstance, FormRules } from "element-plus";
import { reqResetPsd } from "@/api/business/user";
const router = useRouter();

const formOrigin = () => ({
  password: "",
  userId: "",
});

interface RuleForm {
  password: string;
  userId: string | number;
}

const rules = reactive<FormRules<RuleForm>>({
  password: [
    { required: true, message: "请输入新密码", trigger: "blur" },
    {
      pattern: "^[a-zA-Z0-9]{5,12}$",
      message: "请输入合法的5-12位字母与数字",
      trigger: "blur",
    },
  ],
});
const psdForm = ref<RuleForm>(formOrigin());
const dialog = ref(null);
const show = (id) => {
  psdForm.value.userId = id;
  dialog.value.show = true;
};

const psdFormRef = ref(null);
const confrimHandler = () => {
  psdFormRef.value.validate((valid, fields) => {
    if (valid) {
      reqResetPsd({ ...psdForm.value }).then((res) => {
        if (res.code === 1) {
          ElMessage.success("操作成功");
        } else {
          ElMessage.info(res.msg);
        }
        dialog.value.show = false;
      });
    }
  });
};

// 初始化
const hideHandler = () => {
  psdForm.value = formOrigin();
  psdFormRef.value.resetFields();
};
defineExpose({ show });
</script>

<style lang="scss" scoped></style>